<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial - scale = 1.0">
  <title>购物车</title>
  <style>
    .cart-list {
      list-style: none;
      padding: 0;
    }

    .cart-item {
      border: 1px solid #ccc;
      margin: 10px 0;
      padding: 10px;
      display: flex;
      align-items: center;
    }

    .product-img {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }

    .product-info {
      flex: 1;
    }

    .product-name {
      display: block;
    }

    .product-color {
      color: #666;
    }

    .product-price {
      color: #f00;
    }

    .quantity-control {
      display: inline-block;
      margin: 0 10px;
    }

    .total-price {
      color: #f00;
    }

    .remove-button,
    .move-button {
      background: none;
      border: none;
      color: #007bff;
      cursor: pointer;
    }

    .gifts-list {
      list-style: none;
      padding: 0;
      margin: 5px 0;
    }

    .gift-item {
      margin: 3px 0;
    }

    .discount-info {
      color: #f00;
    }

    .limit-info {
      color: #f00;
    }

    .operation-bar {
      margin: 10px 0;
    }

    .operation-button {
      margin-right: 10px;
    }

    .summary-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .checkout-button {
      background: #f00;
      color: #fff;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app">
    <ul class="cart-list">
      <li v-for="(item, index) in cartItems" :key="index" class="cart-item">
        <input type="checkbox" v-model="item.checked">
        <img :src="item.image" alt="商品图片" class="product-img">
        <div class="product-info">
          <span class="product-name">{{ item.name }}</span>
          <span class="product-color">{{ item.color }}</span>
          <span class="product-price">¥{{ item.price | currency }}</span>
          <div class="quantity-control">
            <button @click="decreaseQuantity(index)" :disabled="item.quantity === 1">-</button>
            <span>{{ item.quantity }}</span>
            <button @click="increaseQuantity(index)">+</button>
          </div>
          <span class="total-price">¥{{ item.totalPrice | currency }}</span>
          <button @click="removeItem(index)" class="remove-button">删除</button>
          <button @click="moveToWishlist(index)" class="move-button">移入关注</button>
          <div v-if="item.gifts && item.gifts.length > 0" class="gifts-list">
            <ul>
              <li v-for="(gift, giftIndex) in item.gifts" :key="giftIndex" class="gift-item">
                【赠品】{{ gift.name }}
                <span v-if="gift.showPrice">查看价格</span>
              </li>
            </ul>
          </div>
          <div v-if="item.discount" class="discount-info">{{ item.discount }}</div>
          <div v-if="item.limit" class="limit-info">{{ item.limit }}</div>
        </div>
      </li>
    </ul>
    <div class="operation-bar">
      <!-- 使用计算属性绑定全选框 -->
      <input type="checkbox" v-model="allChecked">全选</input>
      <button @click="deleteSelected" class="operation-button">删除选中的商品</button>
      <button @click="moveSelectedToWishlist" class="operation-button">移入关注</button>
      <button @click="clearCart" class="operation-button">清理购物车</button>
    </div>
    <div class="summary-bar">
      <span>已选择 {{ selectedItems.length }} 件商品</span>
      <span>总价：¥{{ totalPrice | currency }}</span>
      <span v-if="promotionAmount > 0">促销：-¥{{ promotionAmount }}</span>
      <button @click="checkout" class="checkout-button">去结算</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        cartItems: [
          {
            id: 1,
            name: '小米13 徕卡光学镜头 第二代骁龙8处',
            color: '黑色',
            price: 4599,
            quantity: 1,
            totalPrice: 4599,
            image: 'https://img2.baidu.com/it/u=1377029660,2190956961&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            gifts: [
              { name: '健康无忧服务季卡', showPrice: true },
              { name: '体验卡免费领，多款APP免流，超大流量任性...', showPrice: true }
            ],
            limit: '限购1件',
            checked: false
          },
          {
            id: 2,
            name: 'Redmi K50 天玑8100 2K柔性直屏',
            color: '幽芒',
            price: 2399,
            quantity: 1,
            totalPrice: 2399,
            image: 'https://img2.baidu.com/it/u=1377029660,2190956961&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            gifts: [
              { name: '小米充电宝 10000mAh 22.5W 随机发货', showPrice: true },
              { name: '体验卡免费领，多款APP免流，超大流量任性...', showPrice: true }
            ],
            discount: '比加入时降100元',
            checked: false
          },
          {
            id: 3,
            name: 'Redmi Note12Pro 5G IMX766 旗舰影像 OIS光学防抖 OLED柔性直屏',
            color: '时光蓝',
            price: 1999,
            quantity: 1,
            totalPrice: 1999,
            image: 'https://img2.baidu.com/it/u=1377029660,2190956961&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            limit: '限购2件',
            discount: '比加入时降100元',
            checked: false
          },
          {
            id: 4,
            name: 'Redmi Note 11 Pro 5G 三星',
            color: '迷雾森林',
            price: 1999,
            quantity: 1,
            totalPrice: 1999,
            image: 'https://img2.baidu.com/it/u=1377029660,2190956961&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            checked: false
          }
        ],
        promotionAmount: 60
      },
      computed: {
        selectedItems() {
          return this.cartItems.filter(item => item.checked);
        },
        totalPrice() {
          return this.selectedItems.reduce((acc, item) => acc + item.totalPrice, 0);
        },
        // 全选计算属性
        allChecked: {
          get() {
            // 当所有商品都被勾选时，全选框为选中状态
            return this.cartItems.every(item => item.checked);
          },
          set(value) {
            // 当全选框状态改变时，更新所有商品的勾选状态
            this.cartItems.forEach(item => {
              item.checked = value;
            });
          }
        }
      },
      methods: {
        increaseQuantity(index) {
          this.cartItems[index].quantity++;
          this.cartItems[index].totalPrice = this.cartItems[index].price * this.cartItems[index].quantity;
        },
        decreaseQuantity(index) {
          if (this.cartItems[index].quantity > 1) {
            this.cartItems[index].quantity--;
            this.cartItems[index].totalPrice = this.cartItems[index].price * this.cartItems[index].quantity;
          }
        },
        removeItem(index) {
          this.cartItems.splice(index, 1);
        },
        moveToWishlist(index) {
          console.log('移入关注：', this.cartItems[index]);
          this.cartItems.splice(index, 1);
        },
        deleteSelected() {
          this.cartItems = this.cartItems.filter(item =>!item.checked);
        },
        moveSelectedToWishlist() {
          this.cartItems.forEach(item => {
            if (item.checked) {
              console.log('移入关注：', item);
            }
          });
          this.cartItems = this.cartItems.filter(item =>!item.checked);
        },
        clearCart() {
          this.cartItems = [];
        },
        checkout() {
          console.log('去结算，已选商品：', this.selectedItems);
        }
      },
      filters: {
        currency(value) {
          return value.toFixed(2);
        }
      }
    });
  </script>
</body>

</html> 